<template>
  <div class="container">
    <van-search
      custom-class="mk-van-search"
      background="#ED6D96"
      :value="keywords"
      placeholder="年抛 金粉 活动"
      v-model="keywords"
      use-action-slot
      @search="onSearch"
    ></van-search>
    <div class="table">
      <div class="left-control">
        <div
          class="item"
          v-for="(item, index) in leftList"
          :key="index"
          :class="categoryName== item.name ? 'active':''"
          @click="bindArea(item.id)"
        >{{item.display_name}}</div>
      </div>
      <div class="right-show">
        <scroll-view class="body" scroll-y>
          <div class="head">品牌分类</div>
          <div
            class="box"
            v-for="(item, index) in rightList"
            :key="index"
            @click="goToBrand(item.name)"
          >
            <image :src="item.image + '?imageView2/1/w/120/h/120/q/75'" lazy-load="true" />
            <p>{{item.name}}</p>
          </div>
        </scroll-view>
      </div>
    </div>
    <van-toast id="van-toast" />
  </div>
</template>
<script>
import * as CategoryAction from '@/api/category'
import Toast from 'vant-weapp/dist/toast/toast'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      leftList: [],
      rightList: [],
      keywords: '',
      categoryName: null
    }
  },
  computed: {
    ...mapState(['me'])
  },
  onLoad (query) {
    this.keywords = ''
    this.leftList = []
    this.rightList = []
    wx.showNavigationBarLoading()
    wx.showShareMenu({ withShareTicket: true })
    if (query.code) wx.setStorageSync('__inviteCode', query.code)
  },
  onShow () {
    this.fetchProLists()
  },
  onShareAppMessage (res) {
    return {
      title: this.shareTitle(),
      path: this.sharePath()
    }
  },
  methods: {
    onSearch (event) {
      this.keywords = event.mp.detail
      wx.navigateTo({ url: '../product/search?title=' + this.keywords })
    },
    goToBrand (name) {
      wx.navigateTo({
        url: '../brand/area?name=' + name + '&title=' + this.categoryName
      })
    },
    shareTitle () {
      if (!this.me) return `美控小管家向您推荐了美瞳品牌`
      if (this.me) return `${this.me.nickname}向您推荐了美控所有品牌`
    },
    sharePath () {
      if (!this.me) return '/pages/brand/category'
      if (this.me && this.me.invite_code) { return '/pages/brand/category?code=' + this.me.invite_code }
    },
    bindArea (id) {
      for (let item of this.leftList) {
        if (item.id === id) {
          this.rightList = item.subs
          this.categoryName = item.name
        }
      }
    },
    fetchProLists () {
      CategoryAction.all({ r: Math.random() })
        .then(data => {
          wx.hideNavigationBarLoading()
          this.leftList = data
          if (this.categoryName) return
          this.rightList = this.leftList[0].subs
          this.categoryName = this.leftList[0].name
        })
        .catch(err => Toast(err.msg))
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  .table {
    position: fixed;
      top: 110rpx;
    left: 0;
    right: 0;
    color: black;
    display: flex;
    .left-control {
      width: 27%;
      background: #f8f8f8;
      min-height: 1566rpx;
      height: 100%;
      overflow-y: auto;
      .item {
        padding: 30rpx 20rpx;
        font-size: 27rpx;
      }
      .active {
        background: #fff;
        border-left: 3px solid #e6648c;
      }
    }
    .right-show {
        background: #fff;
      height: 100%;
      width: 73%;
      overflow-y: auto;
      .head {
        width: 100%;
        background: #f8f8f8;
        padding: 10rpx;
        font-size: 32rpx;
        color: #666;
        font-weight: 300;
        margin-bottom: 20rpx;
      }
      .body {
        display: fixed;
        width: 100%;
        height: auto;
        padding-bottom: 90rpx;
        overflow-y: auto;
        .box {
          width: 25%;
          margin-bottom: 38rpx;
          display: inline-block;
          image {
            width: 112rpx;
            height: 112rpx;
            display: block;
            box-sizing: border-box;
            border: 1rpx solid #eee;
            margin: 0 auto;
          }
          p {
            text-align: center;
            font-size: 20rpx;
            max-height: 25rpx;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
